<script setup lang="ts">
import { ArrowLeft } from '@element-plus/icons-vue';
import {ref} from 'vue'
import { useRouter } from 'vue-router';
import { ActiveViews } from '@/constants'
import { setActiveViews } from '@/utils'
const router = useRouter();

const avatar = ref('https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif');

const returnHome = ()=>{
  setActiveViews('activeViews',ActiveViews.Home)
  router.push('/')
}
</script>

<template>
  <div class="header-container flex align-items-center self-start border-box">
    <div class="left flex justify-content-center align-items-center">
      <el-button :icon="ArrowLeft" circle size="small" @click="returnHome" />
    </div>
    <div class="center">
      <slot></slot>
    </div>
    <div class="right flex justify-content-center align-items-center">
      <el-avatar :size="30" :src="avatar" />
    </div>
  </div>
</template>

<style scoped lang="scss">
.header-container{
  width: 100%;
  height: 50px;
  border-bottom: 1px solid var(--border-color);
  .left{
    width: 60px;
    height: 100%;
    border-right: 1px solid var(--border-color);
  }

  .center{
    flex: 1;
  }

  .right{
    width: 80px;
    height: 100%;
    border-left: 1px solid var(--border-color);
  }
}
</style>
